﻿// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

var rendererOptions = {
    draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var markers = [];
var myLatlng = new google.maps.LatLng(10.763412, 106.682405);
var initstart = null;
var initdest = null;
var myPosition = null;
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        myPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        markerr = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.BOUNCE,
            position: myPosition
        });
        map.setCenter(myPosition);
    });
}
function getCurrentPosition() {
    navigator.geolocation.getCurrentPosition(function (position) {
        ps = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        if (markerAtPoint(ps)) {
            map.setCenter(ps);
        }
        else {
            markerr = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.BOUNCE,
                position: myPosition
            });
        }
        
    });
}
function markerAtPoint(latlng) {
    if (myPosition.equals(latlng)) return true;
    return false;
}
function initialize() {


    var mapOptions = {
        zoom: 15,
        center: initstart
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    // Create the search box and link it to the UI element.
    var input = (document.getElementById('pac-input'));
    // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(
      /** @type {HTMLInputElement} */(input));

    // [START region_getplaces]
    // Listen for the event fired when the user selects an item from the
    // pick list. Retrieve the matching places for that item.
    google.maps.event.addListener(searchBox, 'places_changed', function () {
        var places = searchBox.getPlaces();

        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
        }

        // For each place, get the icon, place name, and location.
        markers = [];
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0, place; place = places[i]; i++) {

            // Create a marker for each place.
            var marker = new google.maps.Marker({
                map: map,
                title: place.name,
                position: place.geometry.location
            });

            markers.push(marker);

            bounds.extend(place.geometry.location);
            initdest = new google.maps.LatLng(10.2, 10.2);
            var window = new google.maps.InfoWindow();
            window.setContent(place.name + " | " + place.geometry.location + "");
            window.setPosition(place.geometry.location);
            google.maps.event.addListener(marker, 'click', function () {
                window.open(map, marker);
            });
        }

        map.fitBounds(bounds);
    });
    // [END region_getplaces]

    // Bias the SearchBox results towards places that are within the bounds of the
    // current map's viewport.
    google.maps.event.addListener(map, 'bounds_changed', function () {
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
    });
 
    
    google.maps.event.addListener(map, 'click', function (event) {
        if (markers.length >= 2) {
        }
        else {
            addMarker(event.latLng);
            
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);


function setApBp() {
    initstart = document.getElementById('start').value;//new google.maps.LatLng(10.763412, 106.682405);
    initdest = document.getElementById('end').value;//new google.maps.LatLng(12.763412, 107.682405);
    this.fx();

}

function mycreateMarker() {

}
function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
    });
}
function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    markers.push(marker);
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}
function timduong()
{
    var selectedMode = document.getElementById('mode').value;
   directionsDisplay.setMap(map);
    var request = {// khai bao duong di
        origin: markers[0].getPosition(),
        destination: markers[1].getPosition(),
        travelMode: google.maps.TravelMode[selectedMode]
    };
    directionsService.route(request, function (response, status) {// request ham tim duong di
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }else
		{alert("Không tìm thấy đường đi");}
    });
    deleteMarkers();    
}
